<template>
    <div class="DcnBottom">
        <CodeCard v-bind="btnDesc">
            <SdnCheckBox v-model="checked">备选项</SdnCheckBox>
        </CodeCard>
    </div>
</template>

<script>

import { ref } from 'vue'

export default {
    components: {
        
    },
    setup() {
        let checked = ref(true)

        let btnDesc = {
            title: "Checkbox 多选框",
            describe: "一组备选项中进行多选",
            codeBlock:
                `   <SdnCheckBox v-model="checked">备选项</SdnCheckBox>`
            ,
            attrs: [],
            events: [],
            methods: [],
            slots: []
        };
        const attrsList = [
            ["label", "选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）", "string / number / boolean", "—", "—"],
            ["true-label", "选中时的值", "string / number", "—", "—"],
            ["false-label", "没有选中时的值", "string / number", "—", "—"],
            ["disabled", "是否禁用", "boolean", '—', "FALSE"],
            ["border", "是否显示边框", "boolean", '—', "FALSE"],
            ["size", "Checkbox 的尺寸，仅在 border 为真时有效", "string", 'medium / small / mini', "—"],
            ["name", "原生 name 属性", "string", "—", "—"],
            ["checked", "当前是否勾选", "boolean", '—', "FALSE"],
            ["indeterminate", "设置 indeterminate 状态，只负责样式控制", "boolean", '—', "FALSE"]]
        const eventList = [
            ['change', '当绑定值变化时触发的事件', '更新后的值']
        ]
        const methodList = []
        const slotList = []


        let pushList = (data, type) => {
            if (!data.length) return false
            data.forEach(item => {
                if (type === 'attr') {
                    btnDesc.attrs.push(
                        {
                            name: item[0],
                            describe: item[1],
                            type: item[2],
                            emun: item[3],
                            default: item[4],
                        }
                    )
                } else if (type === 'event') {
                    btnDesc.events.push(
                        {
                            name: item[0],
                            describe: item[1],
                            params: item[2]
                        }
                    )
                } else if (type === 'method') {
                    btnDesc.methods.push(
                        {
                            name: item[0],
                            describe: item[1],
                            params: item[2]
                        }
                    )
                } else if (type === 'slot') {
                    btnDesc.slots.push(
                        {
                            name: item[0],
                            describe: item[1]
                        }
                    )
                }
            })
        }
        pushList(attrsList, 'attr')
        pushList(eventList, 'event')
        pushList(methodList, 'method')
        pushList(slotList, 'slot')

        return {
            btnDesc,
            checked
        };
    },
};
</script>

<style lang="stylus">
</style>
